<template>
  <div style="width: 70%;margin-top: 5%">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-dynamic">
      <el-form-item style="width: 49%" label="昵称修改" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>


      <el-form-item style="width: 60%" label="联系方式" prop="userPhone">
        <el-input v-model="ruleForm.userPhone"> </el-input>
      </el-form-item>

      <el-form-item style="width: 70%" prop="email" label="邮箱">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('formName')">提交修改</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  name: "infoeditor",

  data() {

    return {

      ruleForm: {

        userName: '',
        email: '',
        userPhone: '',


      },
      rules: {
        userName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: ["blur", "change"],
          },
        ],
        userPhone: [
          {
            required: true,
            message: '请输入电话号码',
            trigger: ["blur", "change"],
          },
          {

            min: 11, max: 11, message: '请输入11位的号码', trigger: 'blur'
          },
          {
            pattern:  /^1[123456789]\d{9}$/,
            message: '请输入正确的手机号码'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
    };
  },
  methods: {

    //获取当前用户数据
    data: function () {
      var tokenObject = this.$Storage.getItemForLs(this.$TestData.TOKEN_OBJECT_KEY);
      this.$Request
        .fetch("/api/rentuser/user/" + tokenObject.aud, {})
        .then((result) => {
          this.ruleForm = result;
        })
        .catch(() => { });
    },
    //修改数据点击提交
    submitForm: function () {
      // 验证表单并提交 Model
      this.$refs["ruleForm"].validate((isValid) => {
        if (!isValid) return;
        this.$confirm("确定修改吗？", "修改", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$Request
              .fetch_("/api/rentuser/user", 'put', this.ruleForm)
              .then((result) => {
                if (result.status == this.$Request.OK_CODE) {
                  // console.log(result.data.userName);
                  $("[name=userName]").html(result.data.userName);
                  
                  this.ruleForm = result.data;
                  Message({
                    message: result.message,
                    type: "success",
                    duration: 5 * 1000,
                  });
                } else {
                  this.$message.info(result.message);
                }
              })
              .catch((error) => {
                console.log(error);
              });
          })
          .catch(() => { });
      });
    },
  },
  mounted() {
    this.data();

  },



}
</script>

<style scoped>

</style>